<template>
  <div>
    <el-dialog
      ref="refDlg"
      :title="flag === 'edit' ? '编辑' : '新增'"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600"
      @close="handleBack"
    >
      <div>
        <el-form ref="refForm" class="financeForm" :rules="formRules" :model="formData" size="mini" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="异常类型编码:" size="mini" prop="typeCode">
                <span v-if="flag === 'edit'">{{ formData.typeCode }}</span>
                <!-- <el-input v-else v-model="formData.typeCode" placeholder="请输入异常类型编码" /> -->
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="异常类型:" size="mini" prop="exceptionType">
                <span v-if="flag === 'edit'">{{ formData.exceptionType }}</span>
                <el-input v-else v-model="formData.exceptionType" placeholder="请输入异常类型" maxlength="128" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="所属模块:" size="mini" prop="belongModel">
                <span v-if="flag === 'edit'">{{ formaterData(belongModelList, formData.belongModel) }}</span>
                <c-dict-select v-else v-model="formData.belongModel" dict-type-code="BELONG_MODEL" placeholder="所属模块" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="是否BPM审批:" size="mini" prop="isBpmReview">
                <el-select v-model="formData.isBpmReview" placeholder="请选择是否BPM审批" style="width:100%">
                  <el-option v-for="item in booleansList" :key="item.id" :label="item.dictName" :value="item.dictCode" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="流程编码:"
                size="mini"
                prop="processCode"
                :rules="[{required: formData.isBpmReview, message: '请输入流程编码'},
                         {pattern: /^[A-Za-z]+$/, message: '请输入英文字母'}]"
              >
                <el-input v-model="formData.processCode" placeholder="请输入流程编码" maxlength="128" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="异常审批人员:" size="mini" prop="approver">
                <input-with-dialog
                  v-model="formData.approver"
                  :props="{label:'userName',value:'account'}"
                  param-field="keyWord"
                  request-method="post"
                  :multiple="false"
                  :focus-query="true"
                  :config="staffConfig"
                  @change="staffChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" size="mini" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDictByPatchType } from '@/api/dataDict'
import { saveException, getExceptionDetail } from '@/api/basicData'
// import { getUserInfo } from '@/utils/auth'
// import fileUploader from '@/components/importFile'
// import { postConfigAttachmentTemplate, changeFileList } from '@/api/proConfig'
// import { getShopAttachment } from '@/api/decorate'
export default {
  name: 'EditDialog',
  // components: { fileUploader },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      flag: '',
      belongModelList: [],
      hasDuty: false,
      booleansList: [
        { dictName: '是', dictCode: 1 },
        { dictName: '否', dictCode: 0 }
      ],
      formData: {
        approver: []
      },
      formRules: {
        exceptionType: [{ required: true, message: '请输入异常类型' }],
        belongModel: [{ required: true, message: '请选择所属模块' }],
        isBpmReview: [{ required: true, message: '请选择是否BPM审核' }]
      },
      staffConfig: {
        title: '人员',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/user/domainUser/page`,
        setting: [
          {
            prop: 'account',
            title: '账号'
          },
          {
            prop: 'userName',
            title: '名称'
          },
          {
            prop: 'orgName',
            title: '组织'
          },
          {
            prop: 'phone',
            title: '电话'
          }
        ]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  async created() {
    await this.getDictByPatchTypeAll(['BELONG_MODEL']).then(res => {
      this.belongModelList = res.BELONG_MODEL
    })
    if (this.detailData.data) {
      this.flag = this.detailData.flag
      getExceptionDetail(this.detailData.data.id).then(res => {
        if (res.success && res.data) {
          this.formData = res.data
          if (this.formData.officeCode && this.formData.officeName) {
            const office = [{ label: this.formData.officeName, value: this.formData.officeCode }]
            this.$set(this.formData, 'office', office)
          }
          if (this.formData.approverName && this.formData.approverCode) {
            const approver = [{ label: this.formData.approverName, value: this.formData.approverCode }]
            this.$set(this.formData, 'approver', approver)
          }
        }
      })
    }
  },
  methods: {
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 格式化数据
    formaterData(arr, dictCode) {
      if (!arr.length) return
      const tmpArr = arr.filter(item => item.dictCode === dictCode)
      if (tmpArr.length) {
        return tmpArr[0].dictName
      }
      return dictCode
    },
    // 选择办事处
    officeChange(row) {
      this.formData.officeCode = row[0].code
      this.formData.officeName = row[0].name
    },
    // 选择人员
    staffChange(row) {
      this.formData.approverCode = row[0].account
      this.formData.approverName = row[0].userName
    },
    // 取消
    handleBack() {
      this.dialogShow = false
      this.clearForm()
    },
    // 清空表单
    clearForm(done) {
      this.formData = {
        staff: [],
        office: []
      }
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 提交
    submitForm() {
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          // return
          saveException(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.dialogShow = false
              this.clearForm()
              const isNew = !this.formData.id
              this.$emit('success', isNew)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
